<template>
    <div>
        <h2>五子棋</h2>
        <div class="body">
            <div class="board">
                <Grid v-for="(index,_) in 225" v-bind:key="_" @click.native="clickGrip(index)"
                      :index="index" ref="Grid">
                </Grid>
            </div>

            <div class="control">
                <el-button @click="clearMap" class="control_restart">Restart</el-button>
                <div class="control_turn" v-show="myTurn">It is your turn</div>
                <div class="control_turn" v-show="!myTurn">It is not your turn</div>
                <div v-show="chess==='b'" class="control_chess">your chess is black</div>
                <div v-show="chess==='w'" class="control_chess">your chess is white</div>
            </div>
        </div>
    </div>
</template>

<script>
    import Grid from "@/games/component/Grid";
    import {judge} from "@/games/methods/gomoku";

    export default {
        name: "GomokuBody",
        components: {Grid},
        data(){
            return{
                mapData: JSON.parse(localStorage.getItem("mapData")),
                myTurn: false,
                chess: "",
                win: false
            }
        },
        methods:{
            clearMap:function () {
                this.axios.get("/game/restart")
                .then(res=>{
                    res = res.data
                    const mapData = res.data
                    this.mapData = mapData
                    localStorage.setItem("mapData", JSON.stringify(mapData))
                })

                this.setChess()
                this.win = false
            },

            clickGrip:function (index) {
                if (this.myTurn){
                    const item = this.$refs.Grid[index-1]
                    const y = (parseInt(index) - 1) % 15
                    const x =  Math.floor((parseInt(index) - 1) / 15)
                    const chess = localStorage.getItem("chess")

                    // 先走棋
                    console.log("click, x:" + x + ", y: " + y)
                    if (this.mapData[x][y] !== "b" && this.mapData[x][y] !== "w"){
                        this.mapData[x][y] = chess
                        localStorage.setItem("mapData", JSON.stringify(this.mapData))
                        // 更新子组件的数据
                        item.updateData(true)
                        this.setMap(x,y)
                        this.myTurn = false
                    } else {
                        console.log("has other chess")
                    }
                } else {
                    console.log("it is not your turn")
                }
            },

            setMap:function (x,y) {
                this.axios.get("/game/set_gomoku_map",{params:{
                        "x":x,"y":y,"color":localStorage.getItem("chess")}})
                    .then(res=>{
                        res = res.data
                        this.mapData = res.data
                        localStorage.setItem("mapData", JSON.stringify(this.mapData))
                    })
            },


            getMap:function () {
                console.log("refresh")
                this.axios.get("/game/get_gomoku_map")
                    .then(res=>{
                        res = res.data
                        const newMap = res.data
                        for (let index = 1; index <= 255; index++){
                            const y = (index-1) % 15
                            const x =  Math.floor((index-1) / 15)
                            if (newMap[x][y] === localStorage.getItem("chess")){
                                this.$refs.Grid[index-1].updateData(true)
                            } else if (newMap[x][y] === ""){
                                this.$refs.Grid[index-1].clearAll()
                                if (newMap[x][y] !== this.mapData[x][y]){
                                    this.setChess()
                                }
                            } else {
                                this.$refs.Grid[index-1].updateData(false)
                                if (newMap[x][y] !== this.mapData[x][y] && newMap[x][y] !== this.mapData[x][y]){
                                    this.myTurn = true
                                }
                            }
                            this.mapData[x][y] = newMap[x][y]
                        }
                    })
                localStorage.setItem("mapData", JSON.stringify(this.mapData))

                // 再判断是否已经获胜
                const res = judge(JSON.parse(localStorage.getItem("mapData")))
                console.log("judging")
                console.log(res)
                if ((res === 1 || res === 0) && this.win === false){
                    this.win = true
                    const h = this.$createElement;
                    this.$notify({
                        title: '游戏结束！',
                        message: h('i', { style: 'color: teal'}, 'win!')
                    });
                    this.myTurn = true
                }
            },


            refreshData:function () {
                window.setInterval(()=>{
                    setTimeout(()=>{
                        this.getMap()
                    },0)
                },800)
            },

            setChess:function () {
                if (sessionStorage.getItem("name") === "wzz"){
                    localStorage.setItem("chess", "b")
                    this.myTurn = false
                    this.chess = 'b'
                } else {
                    localStorage.setItem("chess", "w")
                    this.myTurn = true
                    this.chess = 'w'
                }
                this.win = false
            }
        },
        created() {
            // 初始化棋盘
            if (localStorage.getItem("mapData") === null){
                const mapData = [15][15];
                localStorage.setItem("mapData", JSON.stringify(mapData))
            }

            this.setChess()

            // 开始不断刷新界面
            this.refreshData()
        }
    }
</script>

<style scoped lang="scss">
    .body{
        width: 800px;
        height: 604px;
        margin: 50px auto;

        display: flex;
        flex-direction: row;

        .board{
            width: 604px;
            height: 604px;
            display: flex;
            flex-wrap: wrap;

            border: 1px solid;
        }

        .control{
            border: 1px solid;

            width: 196px;
            height: 100%;

            display: flex;
            flex-direction: column;

            .control_restart{
                width: 80%;
                margin: 20px auto;
            }

            .control_turn{
                margin-bottom: 20px;
            }

            .control_chess{

            }
        }
    }
</style>
